import React, { memo ,useEffect,useRef} from 'react';
import {useDispatch,useSelector,shallowEqual} from 'react-redux';
import { getNewAlbumAction } from '../../store/actionCreators';
import {NEW_ALBUM_BANNERS} from  'common/contants';

import {
	AlbumWrapper,
} from './style';
import { Carousel } from 'antd';
import YAlbumCover from 'components/album-covers';
import YThemeHeaderRCM from 'components/theme-header-rcm';

export default memo(function YNewAlbum() {
	
	const pageRef = useRef();
	// reacr Hook
	const { newAlbums } = useSelector((state) =>({
		newAlbums:state.recommend.get('newAlbums')
	}),shallowEqual);

	const  dispatch = useDispatch();
	// Hook
	useEffect(() => {
		dispatch(getNewAlbumAction(NEW_ALBUM_BANNERS));
	}, [dispatch])
	
	return (
		<AlbumWrapper>
		<YThemeHeaderRCM title="新碟上架" />
		<div className="content">
		  <button className="arrow arrow-left sprite_02" 
				  onClick={e => pageRef.current.prev()}></button>
		  <div className="album">
			<Carousel dots={false} ref={pageRef}>
			  {
				[0, 1].map(item => {
				  return (
					<div key={item} className="page">
					  {
						newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
						  return <YAlbumCover key={iten.id} 
						  					info={iten} 
											size={100} 
											width={118} 
											bgp="-570px"/>
						})
					  }
					</div>
				  )
				})
			  }
			</Carousel>
		  </div>
		  <button className="arrow arrow-right sprite_02"
				  onClick={e => pageRef.current.next()}></button>
		</div>
	  </AlbumWrapper>
	)
})
